<!DOCTYPE html>
<html>
<head>
    <title>${sysEn}-角色编辑</title>
     <#include "/common/com_edit_css.ftl" >
    <link rel="stylesheet" href="${ctx}/js/easytree/tree.css">
</head>
<body>
    <div class="wrapper wrapper-content fadeInRight commoneditpage">
        <div class="row">
            <div class="col-lg-8 m-auto">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>${actNm}-角色</h5>
                    </div>
                    <div class="ibox-content">
                        <form id="form" action="${ctx}/cms_role_edit_sub.do" method="post">
                            <input type="hidden" name="id" id="id" value="${obj.id}">
                            <div class="form-group row"><label class="col-lg-2 col-form-label must">角色名称：</label>
                                <div class="col-lg-10">
                                    <input type="text" placeholder="角色名称"
                                           value="${obj.name}"
                                           id="name" name="name" class="form-control"
                                           data-easyform="length:1 64;real-time;"
                                           data-message="类别名称为长度[1-32]字符"
                                            />
                                </div>
                            </div>
                            <div class="form-group row"><label class="col-lg-2 col-form-label must">配置菜单：</label>
                                <div class="col-lg-10">
                                    <ul id="tt" class="easyui-tree"></ul>
                                </div>
                            </div>
                            <div class="form-group row ">
                                <div class="col-lg-offset-2 col-lg-10">
                                    <button class="btn btn-sm btn-primary" type="button" id="signBtn" tg="ensure">确定</button>
                                    <button class="btn btn-sm btn-white" type="button" id="cancelBtn" tg="cancel">取消</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <#include "/common/com_edit_js.ftl">
    <script type="text/javascript" src="${ctx}/js/easytree/jquery.parser.js"></script>
    <script type="text/javascript" src="${ctx}/js/easytree/jquery.tree.js"></script>
    <script type="text/javascript">
        (function($,layer){
            function parse(data){
                var arr = [];
                var obj = {text:"菜单树",id:0,"state": "open"};
                var childrens = cteData(data);
                obj.children = childrens;
                if(obj.children){
                    $(obj.children).each(function(){
                        this.state = "open";
                        $(this.children).each(function(){
                            if(this.children && this.children.length > 0){
                                this.state = "closed";
                            }
                        })
                    });
                }
                arr.push(obj);
                return arr;
            }
            function cteData(data,level){
                var arr = [];
                $(data).each(function(){
                    var obj = {
                        text:this.name,
                        id:this.id,
                        parentId:this.parentId,
                        url:this.url,
                        idx:this.idx,
                        type:this.type,
                        "checked":this.active
                    };
                    if(this.subMenus && this.subMenus.length >0){
                        obj.children = cteData(this.subMenus);
                    }else{
                        obj.children = null;
                    }
                    arr.push(obj);
                });
                return arr;
            }
            $.extend($.fn.tree.defaults, {
                loader: function (param, success, error) {
                    var opts = $(this).tree("options");
                    if (!opts.url) {
                        return false;
                    }
                    if (opts.queryParams) {
                        param = $.extend({}, opts.queryParams, param);
                    }
                    $.ajax({
                        type: opts.method,
                        url: opts.url,
                        data: param,
                        contentType: "application/json;charset=utf-8", //application/json
                        success: function (data) {
                            if(data.success){
                                success(parse(data.data));
                            }else{
                                layer.message(data.message);
                            }
                        },
                        error: function () {
                            error.apply(this, arguments);
                        }
                    });
                }
            });
        })(jQuery,layer);
        $(document).ready(function () {
            var treeUrl = "${ctx}/cms_role_menu_tree.do";
            if(!$("#id").val()){
                $("#form").prop("action","${ctx}/cms_role_add.do");
                treeUrl = "${ctx}/cms_menu_tree.do?parentId=0"
            }else{
                treeUrl += "?roleId=" + $("#id").val();
            }

            $("#tt").tree({
                url:treeUrl,
                method:'get',
                animate:true,
                checkbox:true,
                lines:true
            });

            EditPager.init({
                container:$("#form"),
                param:function () {
                    var id = $("#id").val();
                    var menus = $("#tt").tree("getChecked");
                    var menusStr = "";
                    $(menus).each(function () {
                       if(this.id > 0){
                           menusStr += ","+this.id;
                       }
                    });
                    return {
                        id:id?id:0,
                        menus:menusStr,
                        name:$("#name").val()
                    };
                }
            });
        });

    </script>
</body>
</html>
